<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎注册</title>
		<!-- style标签内部用于书写css样式、css注释 -->
		<style type="text/css">
			* {/* 选中所有元素 */
				/* 控制不同浏览器显示字体一样 */
				font-family: "微软雅黑";
			}
			/* Ctrl + Shift + /:注释 */
			table,td,th{/* 选中所有名字为table和td的元素 */
				border: 2px solid red;
				border-collapse: collapse;/* 设置表格边框和单元格边框合并 */
			}
			table{
				/* 背景色 */
				background-color: lightgray;
				/* table居中显示：左右外边距自适应，始终保持相等 */
				margin-left: auto;
				margin-right: auto;
			}	
			td,th {
				/* 设置内边距 */
				padding: 5px;
				/* text-align: center; */
			}
			h1 {
				/* h1标签占了一整行 */
				/* border: 2px solid blue; */
				/* margin-left: auto;
				margin-right: auto; */
				/* width: 40%; */
				/* 设置元素内容居中 */
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>欢迎注册</h1>
		<!-- #:做一个占位，将来知道地址怎么写了，再把#号换成url地址 -->
		<form action="#">
			<table>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="user" /></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="psw" /></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						
						<input type="radio" name="gender" value="male" checked />男
						<input type="radio" name="gender" value="female" />女
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
						<input type="checkbox" name="like" value="basketball" />篮球
						<input type="checkbox" name="like" value="football" checked />足球
						<input type="checkbox" name="like" value="volleyball" />排球
					</td>
				</tr>
				<tr>
					<td>城市：</td>
					<td>
						<select name="city">
							<option>北京</option>
							<option selected>广州</option>
							<option>上海</option>
							<option>深圳</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>自我描述：</td>
					<td>
						<!-- textarea标签内部不要敲空格和换行，否则不显示提示 -->
						<textarea rows="5" cols="30" placeholder="请输入描述信息..." name="desc"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: center;">
						<!-- value值统一浏览器显示 -->
						<input type="submit" value="提交" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
